<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker custom multi month example 3</title>

        <!-- jQuery -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<!--script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script-->
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
		<script type="text/javascript" src="scripts/jquery.datePickerMultiMonth.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				// Set the date format to something that is easy for our backend to understand...
				Date.format = 'yyyy-mm-dd';
				
				// Save a reference to the hidden input form field...
				var $hiddenInput = $('#selectedDate');
				
				// and a reference to the element we are turning into a date picker...
				var $mm = $('#multimonth');
				
				// initialise the date picker with your chosen settings
				$mm.datePickerMultiMonth(
					{
						startDate: '2009-11-01',
						numMonths: 4,
						inline: true,
						selectMultiple: true
					}
				);
				
				// set all of the current dates selected
				var selectedDates = $hiddenInput.val().split(',');
				for (var i=0; i<selectedDates.length; i++) {
					$mm.dpmmSetSelected(  
						selectedDates[i]
					)
				}
				
				// listen for changes in the selected dates status
				$mm.bind( 
					'dateSelected',
					function(event, date, $td, status)
					{
						// and update the hidden field with a comma seperated list of selected dates...
						var selectedDates = $mm.dpmmGetSelected();
						for (var i=0; i<selectedDates.length; i++) {
							selectedDates[i] = selectedDates[i].asString();
						}
						$hiddenInput.val(selectedDates.join(','));
					}
				);
				
				
				// and just for debugging on this page...
				$('#showHiddenValue').bind(
					'click',
					function(e)
					{
						alert($hiddenInput.val());
						return false;
					}
				);
            });
		</script>

		<style type="text/css">
		#multimonth {
			border: 2px solid #000;
			overflow: auto;
			float: left;
		}
		.dp-applied {
			float: left;
		}
		table.jCalendar {
			border: none;
		}
		.dp-popup-inline {
			height: 160px;
		}
		</style>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker multi month plugin plugin example: showing how you can use the datePickerMultiMonth plugin</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                This page extends the <a href="datePickerMultiMonth4.html">previous example</a> by showing how you can combine
				date pickers which accept multiple dates with the process for adding the selected dates to a hidden input in a
				form... In this case we save the dates in a comma seperated list...
            </p>
			<form name="chooseDateForm" id="chooseDateForm" method="post" action="formFeedback.php">
				<input type="hidden" name="selectedDate" id="selectedDate" value="2009-11-08,2009-11-13" />
				<div id="multimonth">This will be replaced with the multimonth select</div>
				<input type="submit" value="Submit form" />
			</form>
			<p style="clear: left">
				At any time click on <a href="noJS.html" id="showHiddenValue">this link</a> to view the value of the
				hidden input on this page.
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec turpis nisi, hendrerit et, mattis sit amet, tincidunt vel, nisi. Nullam hendrerit. Mauris dictum dictum neque. Nullam nisi eros, consectetur in, consectetur id, venenatis vel, turpis. Morbi porta scelerisque dui. Vivamus cursus odio at leo porttitor tincidunt. Nullam dolor mi, facilisis eget, fermentum nec, faucibus sed, ante. Aliquam nec libero. Integer nulla metus, lobortis eget, mattis eu, facilisis non, magna. Pellentesque ac sem cursus tortor tempor vehicula.</p>
			<p>Fusce neque. Donec erat magna, rhoncus in, vehicula eget, facilisis sit amet, erat. Integer leo nibh, pharetra ut, aliquam eu, condimentum et, lorem. Nulla ante. Nunc ut magna. Phasellus viverra ornare ante. Sed lacinia velit ut turpis. Suspendisse a purus. Fusce nec sapien. Vivamus vitae lorem vitae lacus congue pulvinar. In vulputate justo vitae est. Pellentesque consectetur, dui ac semper dignissim, ligula nibh gravida libero, hendrerit pretium metus nisl eu diam. Donec tellus arcu, commodo sit amet, lacinia eu, luctus quis, augue. In dui. Mauris id erat. Suspendisse libero lorem, luctus at, vestibulum et, pharetra et, tortor. Aliquam semper tempor lorem. Vestibulum libero augue, vehicula faucibus, porttitor sit amet, tempus non, ante.</p>
        </div>
	</body>
</html>